<template>
  <a-card :title="name" class="device-detail-card">
    <template #extra>
      <a-tag :color="color">{{ type }}</a-tag>
    </template>
    <div class="flex">
      <div class="grid flex-grow gap-y-2">
        <div>
          <a-tag class="code">{{ code }}</a-tag>
        </div>
        <p>部门：{{ department }}</p>
        <p>品牌：{{ brand }}</p>
        <p>修改时间：{{ updatedAt }}</p>
        <p>
          唯一标识码：<i>{{ sn }}</i>
        </p>
        <p class="flex items-center gap-4">
          <span class="font-bold text-green-800"
            >创建时间：{{ createdAt }}</span
          >
          <a-tag color="green">创建人: {{ createdBy }}</a-tag>
          <span class="text-blue-700">更新时间：{{ updatedAt }}</span>
          <a-tag color="blue">更新人：{{ updatedBy }}</a-tag>
          <span class="text-red-600 underline" v-if="deleted"
            >删除时间：{{ deletedAt }}</span
          >
          <a-tag color="red" v-if="deleted">删除人：{{ deletedBy }}</a-tag>
        </p>
      </div>
      <div class="flex flex-col justify-between">
        <div class="flex flex-col items-end gap-2 status">
          <a-tag color="blue" v-if="status === Status.Normal">正常</a-tag>
          <a-tag color="purple" v-else-if="status === Status.Discarded"
            >报废</a-tag
          >
          <a-tag color="red" v-else>删除</a-tag>
          <a-tag
            >入库时间：{{
              registrationAt.substring(0, 10)
                ? registrationAt.substring(0, 10)
                : "无"
            }}</a-tag
          >
          <a-tag>设备登记时间：{{ registrationAt.substring(0, 10) }}</a-tag>
        </div>
        <a-radio-group
          class="flex justify-end"
          v-model:value="deviceStatus"
          button-style="solid"
          @change="statusChange"
        >
          <a-radio-button :value="Status.Normal">正常</a-radio-button>
          <a-radio-button :value="Status.Deleted">删除</a-radio-button>
          <a-radio-button :value="Status.Discarded">报废</a-radio-button>
        </a-radio-group>
        <div class="flex self-end gap-2 text-2xl operations">
          <ModifyCloudDeviceModal :device="device" />
          <DeleteConfirm />
          <DeviceDistributeModal :device="device" />
          <ScrapDistributeModal :device="device" />
          <ExportConfirm :device="device" />
        </div>
      </div>
    </div>
  </a-card>
</template>

<script lang="ts">
import {
  computed,
  defineComponent,
  inject,
  PropType,
  reactive,
  ref,
} from "vue";
import { CloudDevice } from "model";
import { DeviceStatus } from "@/@types/enum";
import { Random } from "mockjs";
import moment from "moment";
import ModifyCloudDeviceModal from "@/components/modals/ModifyCloudDeviceModal.vue";
import DeleteConfirm from "../confirm/DeleteCloudDeviceConfirm.vue";
import { statusDevice } from "@/controller/Cloud";
import DeviceDistributeModal from "../modals/DeviceDistributeModal.vue";
import ScrapDistributeModal from "../modals/ScrapDistributeModal.vue";
import ExportConfirm from "../confirm/ExportConfirm.vue";

export default defineComponent({
  name: "DeviceDetailCard",
  props: {
    device: {
      type: Object as PropType<CloudDevice>,
      required: true,
    },
  },
  components: {
    ModifyCloudDeviceModal,
    DeleteConfirm,
    DeviceDistributeModal,
    ScrapDistributeModal,
    ExportConfirm,
  },
  setup(props) {
    const refresh: Function = inject("refresh") ?? new Function();
    const device = reactive(props.device);
    const id = computed(() => device.id);
    const type = computed(() => device.type);
    const name = computed(() => device.name);
    const code = computed(() => device.code);
    const department = computed(() => device.department);
    const sn = computed(() => device.sn);
    const inboundAt = computed(() => device.inboundAt);
    const registrationAt = computed(() => device.registrationAt);
    const createdBy = computed(() => device.createdBy);
    const updatedBy = computed(() => device.updatedBy);
    const deletedBy = computed(() => device.deletedBy);
    const createdAt = computed(() =>
      moment(device.createdAt).format("YYYY-MM-DD")
    );

    const Status = {
      Normal: DeviceStatus.NORMAL,
      Deleted: DeviceStatus.DELETED,
      Discarded: DeviceStatus.DISCARDED,
    };
    const status = computed(() => device.status);
    const deviceStatus = ref<number>(status.value);

    const brand = computed(() => device.brand);
    const updatedAt = computed(() =>
      moment(device.updatedAt).format("YYYY-MM-DD")
    );
    const deleted = computed(() => {
      if (deletedBy.value && device.deletedAt) {
        return true;
      }
      return false;
    });
    const deletedAt = computed(() => {
      if (deleted.value) {
        return moment(device.deletedAt).format("YYYY-MM-DD");
      }
      return null;
    });
    const statusChange = async () => {
      await statusDevice(id.value, deviceStatus.value);
      refresh();
    };
    const color = Random.color();
    return {
      deviceStatus,
      type,
      code,
      department,
      id,
      status,
      name,
      brand,
      updatedAt,
      Status,
      color,
      sn,
      inboundAt,
      registrationAt,
      createdBy,
      updatedBy,
      createdAt,
      deletedAt,
      deletedBy,
      deleted,
      statusChange,
    };
  },
});
</script>

<style lang="scss"></style>
